<template>
  <div class="content">
      <div class="content-body">

    <searchbar placeholder = '搜索门店' btnvalue = '搜索'  v-model="searchInfo">
        <mt-cell  v-for = 'item in storeList' :key = 'item.storeCode' title="" class="main-title account-border-b">
          <span slot="icon">{{item.storeName}}</span>
          <button @click = 'choosethisStore(item)' class="list-right-btn">选择</button>
        </mt-cell>
    </searchbar>
      </div>

  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import searchbar from '@/common/plugins/searchbar';
  import api from '@/common/api/shopAlter';
  import loginApi from '@/common/api/login';
  import mintUi from '@/common/mintUi';
  import {mapMutations, mapActions} from 'vuex';

  /**
   * shopAlter
   * @namespace components/shop/searchshop.vue
   * @description 切换门店点击搜索进入的页面
   */
  export default {
    data () {
      return {
        'storeList': [],
        'searchInfo': ''
      };
    },
    methods: {
      ...mapActions({setPermission: 'setPermission'}),
      ...mapMutations({setStore: 'SETSTORE'}),
      choosethisStore (item) {
        mintUi.openToast('成功切换门店!');
        this.setStore(item);
        loginApi.getResources(3).then(res => {
          this.setPermission(res);
        });
        this.$router.push('/home');
      }
    },
    watch: {
      searchInfo: function (newQuestion) {
        var param = {
          'storeName': newQuestion,
          'groupCode': JSON.parse(sessionStorage.getItem('store')).groupCode
        };
        api.getShopList(param).then(res => { //点击单个选项获取店铺列表api
          this.storeList = res || [];
        });
      }
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'searchbar': searchbar
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';
  .title-Info {
    line-height: px2rem(90px);
    height: px2rem(85px);
    overflow: hidden;
    background: #fafafa;
  }
  .title-left-button {
    text-align: center;
    span {
      font-size: px2rem(38px);
    }
  }
  .title-Middle-input {
    margin-top: px2rem(12px);
    width: 100%;
    height: px2rem(58px);
    line-height: px2rem(60px);
    background-color: #ececec;
    border: none;
    border-radius: px2rem(10px);
    padding-left: 30px;
    box-sizing: border-box;
    outline: none;
  }
  .title-Middle-input-bg {
    line-height: px2rem(92px);
    position: absolute;
    top: 0;
    left: 8px;
    color: #666;
  }
  .title-right-button {
    font-size: px2rem(30px);
    text-align: center;
    color: $theme-color;
  }
  .active {
    background: #fff;
    color: $theme-color;
    &:before {
      background-color: #fff;
    }
  }
  .list-right-btn {
    border: none;
    background-color: $theme-color;
    color: #fff;
    border-radius: px2rem(8px);
    padding: px2rem(8px) px2rem(14px);
  }
  .search-box {
    width: 100%;
    box-sizing: border-box;
    height: px2rem(100px);
    padding: px2rem(15px) px2rem(24px);
    color: #999;
    font-size: px2rem(28px);
    background: #f2f2f2;
    .search-content {
      border-radius: 4px;
      text-align: center;
      line-height: px2rem(64px);
    }
  }
</style>


